<template>
	<view class="goods-list">
		<goods-list :hotgoods="hotgoods"></goods-list>
		<view class="isOver" v-if="flag">----- 到底啦！-----</view>
	</view>
</template>

<script>
	import goodsList from '../../components/goods-list/goods-list.vue'
	export default {
		data() {
			return {
				pageindex:1,
				hotgoods:[],
				flag:'flase'
			}
		},
		onLoad() {
			this.getGoodsList()
		},
		// 下拉到底获取第二页数据
		onReachBottom() {
			if(this.pageindex<=3){
				this.pageindex++
				this.getGoodsList()
			} else {
				return this.flage=true
			}
		},
		onPullDownRefresh() {
			setTimeout(()=>{
				this.pageindex=1
				this.hotgoods = []
				this.flag = 'flase'
				this.getGoodsList()
			},1000)
		},
		methods: {
			// 获取商品列表数据
			getGoodsList(){
				uni.request({
					url: 'http://127.0.0.1:5500/api/shop/HotGoods.json?pageindex='+this.pageindex,
					success: res => {
						this.hotgoods = [...this.hotgoods,...res.data.message]
						uni.stopPullDownRefresh()
					}
				})
			}
		},
		components:{
			"goods-list":goodsList
		}
	}
</script>

<style lang="scss">
	.goods-list{
		background: #eee;
	}
	.isOver{
		width: 100%;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		font-size: 28rpx;
	}
</style>
